<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
	<%@include file="/resource/common/resourceLink.rs" %>
    <title>我的交易记录 - 支付宝</title>
</head>
<style>
    .td{
        width: 40px;
        overflow-x:auto;
    }
</style>
<body>
	<!-- 顶部导航 -->
	<%@ include file="nav.jsp" %>
    <div class="container" style="margin-top: 3%">
        <div class="row">
            <div class="col-md-4">
                <span class="text-primary">统计金额</span>
                <span class="text-primary">下载</span>
                <span class="text-primary">Excel格式</span>
                <span class="text-primary">Txt格式</span>
            </div>
            <div class="col-md-3 col-md-offset-5">
            	<a class="btn btn-default prePage">上一页</a>
            	<a class="btn btn-default nextPage">下一页</a>
            </div>
        </div>
        <div class="table-responsive" style="padding: 10px 0">
            <table class="table table-striped table-bordered table-hover" >
                <tr class="text-center">
                    <td>交易时间</td>
                    <td>交易类型</td>
                    <td>交易单号</td>
                    <td>交易人</td>
                    <td>交易金额</td>
                    <td>账户余额</td>
                    <td>交易详情</td>
                </tr>
                <c:forEach items="${requestScope.recordMap}" var="transaction">
                    <tr class="text-center">
                        <td>${transaction.time}</td>
                        <td>${transaction.type}</td>
                        <td>${transaction.id}</td>
                        <td>${(transaction.user.userName)}</td>
                        <!-- 前端调节 -->
                        <c:choose>
                            <c:when test="${'存款' eq (transaction.type) || '收款' eq (transaction.type)}">
                                <td>+ <strong>${transaction.money}</strong></td>
                            </c:when>
                            <c:otherwise>
                                <td><strong>- ${transaction.money}</strong></td>
                            </c:otherwise>
                        </c:choose>
                        <td>${transaction.balance}</td>
                        <td>
                            <button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
                                    data-placement="top" data-content='${transaction.detail}'>
                                		明细
                                <span class="caret"></span>
                            </button>
                        </td>
                    </tr>
                </c:forEach>
            </table>
            <!-- 账单记录分页 -->
            <div class="clearfix">
                <nav class="pull-right">
                    <ul class="pagination">
                        <li>
                            <a href="/Bank3.0/transaction/queryRecords/1.htm">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <!-- js自动生成 -->
                        <li><a href="/Bank3.0/transaction/queryRecords/1.htm">1</a></li>
                        <li><a href="/Bank3.0/transaction/queryRecords/2.htm">2</a></li>
                        <li><a href="/Bank3.0/transaction/queryRecords/3.htm">3</a></li>
                        <li><a href="/Bank3.0/transaction/queryRecords/4.htm">4</a></li>
                        <li><a href="/Bank3.0/transaction/queryRecords/5.htm">5</a></li>
                        <li>
                            <a href='<c:url value="/transaction/queryRecords/${sessionScope.page.pageCount}.htm" />'>
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div><!-- /.pagination DIV-->
        </div><!-- /.table-responsive -->
    </div>
</body>
<script>
    $(function () {
        $('[data-toggle="popover"]').popover();
        $('.prePage').on('click', function() {
        	getPrePage("pre",".prePage");
        });
        $('.nextPage').on('click', function() {
        	getPrePage(null,".nextPage");
        });
    })
    
    function getPrePage(model,target) {
    	var url = window.location.href;
    	var endPosation = url.lastIndexOf('.');
    	var startPosation = url.lastIndexOf('/');
    	if(endPosation > startPosation){
    		var request = url.substr(startPosation + 1, endPosation - startPosation -1);
    		if (model=="pre") {
    			if (request>1) {
    				request--;
    			}
    		} else {
    			request++;
    		}
    		$(""+target+"").attr("href",request + ".htm");
    	}
    }
    
 	function getNextPage() {
    	
    }
</script>
</html>
